define(function(require, exports){
	var pubjs = require('pubjs');
	var view = require('@base/view');
	var $ = require('jquery');
	var util = require('util');

	var Base = view.container.extend({
		init: function(config) {
			config = pubjs.conf(config, {
				'class': 'P-spot',
				'view_model': {
					'eventTransAdm': this.eventTransAdm,
					'eventPreview': this.eventPreview,
					'width': '',
					'height': '',
					'adm': '',
					'code': ''
				}
			});

			//列表loading元素
			this.$loading = null;
			this.Super('init', arguments);
		},
		afterBuild: function() {
			var el = this.getDOM();
			$([
				'<div class="P-creativeTransAdm">',
					'<div class="M-formHead">',
						'<div class="M-formHeadTitle">' + LANG("创意代码转换") + '</div>',
					'</div>',
					'<div class="M-formCon mb15">',
						'<div class="M-formConGroup">',
							'<label class="group-label mt5">' + LANG('宽：') + '</label>',
							'<div class="group-content">',
								'<input type="text" ms-duplex="width">',
							'</div>',
						'</div>',
						'<div class="M-formConGroup">',
							'<label class="group-label mt5">'+ LANG('高：') + '</label>',
							'<div class="group-content">',
								'<input type="text" ms-duplex="height"></input>',
							'</div>',
						'</div>',
						'<div class="M-formConGroup">',
							'<label class="group-label mt5">'+ LANG('代码：') + '</label>',
							'<div class="group-content">',
								'<textarea class="textArea" ms-duplex="adm"></textarea>',
								'<div class="mt20">',
									'<button class="btn btn-confirm" ms-click="eventTransAdm">' + LANG('转换代码') + '</button>',
									'<button class="btn btn-confirm ml20" ms-click="eventPreview">' + LANG('预览') + '</button>',									
								'</div>',
							'</div>',
						'</div>',
						'<div class="M-formConGroup">',
							'<label class="group-label mt5">'+ LANG('转换后代码：') + '</label>',
							'<div class="group-content">',
								'<textarea class="textArea h400" ms-duplex="code"></textarea>',
							'</div>',
						'</div>',
					'</div>',
				'</div>'
			].join('')).appendTo(el);

			el.find('.M-tableList').css({
				'overflow': 'auto'
			});
		},
		eventTransAdm: function()
		{
			var code = this.transCode();
			this.vm.$.code = code;
		},
		eventPreview: function()
		{
			var code = this.transCode();
			var ifm = window.open();
			ifm.document.write(code);
			ifm.focus();
		},
		transCode: function()
		{
			var data = this.getValue();
			var url = 'http://cdn.scdng.com/data/v/0/tanx_ui.js';
			var base = [
				'<html>',
					'<head>',
						'<title>ADM Preview</title>',
						'<style>*{padding:0;margin:0;}</style>',
					'</head>',
					'<body>',
						'<script type="text/javascript">',
							'var BDX_INFO = {',
								'ct: -1,',
								'adm: "{{adm}}",',
								'url: "/test",',
								'track: "",',
								'width: {{width}},',
								'height: {{height}},',
								'logo: 1',
							'};',
						'</script>',
						'<script src="{{url}}"></script>',
					'</body>',
				'</html>'
			].join('\n');

			return base.replace('{{width}}', data.width)
						.replace('{{height}}', data.height)
						.replace('{{adm}}', data.adm)
						.replace('{{url}}', url);
		},
		getValue: function() {
			var vm = this.vm.$;
			var ret = {
				'width': vm.width || '',
				'height': vm.height || ''
			};

			var adm = vm.adm || '';

			ret.adm = adm.replace(/</g, '\\x3C')
						.replace(/"/g, '\\"')
						.replace(/[\r\n]+/g, '');
			return ret;
		},
		reset: function(){
			this.vm.reset();
		}

	});
	exports.base = Base;
});